<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
  <style>
    /* 添加一些基本的样式 */
    body {
      font-family: Arial, sans-serif;
    }
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    th {
      background-color: #f2f2f2;
      text-align: center;
    }
    .table-button {
      text-align: center;
    }
    .table-button a {
      margin: 0 5px;
      text-decoration: none;
    }
    .table-button a:first-child{
      background-color: #4CAF50;
      color: #fff;
    }
    .table-button a{
      background-color: #36b2f4;
      color: #fff;
    }

    .error{
      color: red;
      font-weight: bold;
      font-size: 20px;
    }
    .img img{
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }

    tfoot{
        text-align: center;

    }

    tfoot a{
      text-decoration: none;
      margin: 5px 10px;
      color: #007bff;
    }

    tfoot a:hover{
      text-decoration: underline;
      color: #209a22;
    }

    tfoot a:visited{
      color: #007bff;
    }

    tfoot a.current_page{
      color: black;
    }

    tfoot a.current_page:hover{
      color: black;
      text-decoration: none;
    }

  #carouselExampleSlidesOnly{
    height: 400px;
    overflow: hidden;
  }
  </style>

  <script th:src="@{/js/jquery.slim.min.js}"></script>
  <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
</head>
<body>
<h1>文件列表</h1>
<a th:href="@{/file/add}" class="btn btn-link">上传文件</a>
<span class="error" th:text="${message}"></span>
<!-- 条件查询表单 -->
<form th:action="@{/file/list}" method="get" class="form-inline">
  <div class="input-group mb-2">
    <div class="input-group-prepend">
      <span class="input-group-text">文件名</span>
    </div>
    <input type="text" aria-label="name" class="form-control" name="name" placeholder="请输入文件名" th:value="${search.name}">
    <div class="input-group-prepend">
      <span class="input-group-text">上传日期</span>
    </div>
    <input type="date" aria-label="date" class="form-control" name="searchDate" placeholder="上传时间" th:value="${search.searchDate}">
    <button type="submit" class="btn btn-primary">搜索</button>
  </div>

</form>
<table>
  <thead>
  <tr>
    <th>序号</th>
    <th>预览</th>
    <th>文件名</th>
    <th>大小</th>
    <th>上传时间</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr th:if="${page.data.size() == 0}">
     <td colspan="6">暂无数据</td>
  </tr>
  <tr th:if="${page.data.size() > 0}" th:each="file, stat : ${page.data}">
    <td th:text="${stat.count}"></td>
    <td class="img"><img th:src="@{${file.path}}" alt="图片"/></td>
    <td th:text="${file.name}"></td>
    <td th:text="${file.size}"></td>
    <td th:text="${file.createTime}"></td>
    <td class="table-button">
      <a th:href="@{'' + ${file.path}}" class="btn btn-sm"  target="_blank">查看</a>
      <!--  data-* 自定义属性     -->
      <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#modal" th:data-name="${file.name}" th:data-id="${file.id}">删除</button>
    </td>
  </tr>
  <!-- 添加更多用户行 -->
  </tbody>

  <tfoot th:if="${page.data.size() > 0 and page.totalPage > 1}">
    <tr>
      <th colspan="6">
        <span th:if="${page.hasPrePage}">
            <a th:href="@{/file/list(p=${page.prePage},s=${page.pageSize},name=${search.name},searchDate=${search.searchDate})}">上一页</a>
        </span>

        <span th:if="!${page.hasPrePage}">
            上一页
        </span>
        <!--     循环页码   -->
        <span th:each="num : ${page.pageNumbers}">
           <a th:if="${num == page.pageNum}" th:text="${num}" class="current_page"></a>
           <a th:if="${num != page.pageNum}" th:href="@{/file/list(p=${num},s=${page.pageSize},name=${search.name},searchDate=${search.searchDate})}" th:text="${num}"></a>
        </span>

        <span th:if="${page.hasNextPage}">
            <a th:href="@{/file/list(p=${page.nextPage},s=${page.pageSize},name=${search.name},searchDate=${search.searchDate})}">下一页</a>
        </span>

        <span th:if="!${page.hasNextPage}">
            下一页
        </span>
      </th>
    </tr>
  </tfoot>
</table>

<!-- 弹出框、 bootstrap 模态框 modal -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel"  data-backdrop="static" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">删除提示</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>确认要删除 【<span id="name"></span>】 吗？</p>
      </div>
      <div class="modal-footer">
        <a id="delete" class="btn btn-danger">删除</a>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript" th:inline="javascript">
  // thymeleaf 获取当前项目路径
  /*<![CDATA[*/
  const ctx = /*[[@{/}]]*/;
  /*]]>*/

</script>
<script>
  $('#modal').on('show.bs.modal', function (event) {
    // 获取点击按钮
    var button = $(event.relatedTarget) // Button that triggered the modal
    // 获取按钮上的自定义属性值 data-name
    var name = button.data('name') // Extract info from data-* attributes
    // 获取按钮上的自定义属性值 data-id
    var id = button.data('id') // Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this); // 获取模态框对象
    // modal.find('.modal-title').text('New message to ' + recipient)
    // 在模态框中 find 指查找元素 #name 是 id 选择器值为 name  text() 设置文本
    modal.find('#name').text(name);
    // 在模态框中 find 指查找元素 #delete 是 id 选择器值为 delete  attr() 设置属性
    modal.find('#delete').attr('href', ctx + 'file/delete/' + id);

    // 获取传递的值，button.data('属性名') 获取 data-属性名 的属性值
    // 获取modal中的元素 modal.find(选择器)
    // 如果是设置文本内容使用 元素.text(内容)， 输入框的value值使用 元素.val(内容)，设置元素属性使用 元素.attr(属性名, 属性值)
  })
</script>
</body>
</html>
